<template>
    <div class="data-export content">
        <div class="top-img">
            <img src="~@images/tools/bitmap.png" alt="">
        </div>

        <div class="data-export-top">
            <tools-header
            :typeName="typeName"
            :num="num"
            :unit="'次'"
            @buy="showDialogBuy"
            :isLogin="isLogin"
            ></tools-header>
        </div>

        <el-card class="data-export-main">
            <el-tabs v-model="activeName" @tab-click="tabClick">
                <el-tab-pane v-for="(item,i) in tabList" :key="i" :label="item.label" :name="item.name">
                    <div 
                    slot="label" 
                    v-czc="['数据报表', '导航' , item.label ,0 ,`dataExport-btn-${item.name}`]"
                    >
                        {{item.label}}

                        <img 
                        v-if="item.hot"
                        src="/images/icon/icon-hot.png"
                        />
                    </div>
                    
                    <component 
                        v-if="mainComponentShowCalc(item)"  
                        :is="item.component" 
                        :code="item.code"
                        :typeName="typeName" 
                        :num="num" 
                        @close="checkLoginAndGetNum" 
                        @buy="showDialogBuy"
                    ></component>

                    <no-login 
                        v-if="!isLogin && activeName === 'figure'" 
                        :imgUrl="item.imgUrl" 
                        :name="item.label" 
                        :type="item.name == 'info' ? 'info' : 'figure'"
                        :imgHeight="item.imgHeight"
                    ></no-login>

                </el-tab-pane>
            </el-tabs>
        </el-card>

        <dialog-product 
            v-model="dialogVisible" 
            :projectids="projectids" 
            @close="checkLoginAndGetNum" 
            @success="checkLoginAndGetNum"
        ></dialog-product>

        <guide-popconfirm
            v-if="activeName === 'week' && isLogin"
            name="guide-export-week"
            key="guide-export-week"
            :list="guideWeekList"
        ></guide-popconfirm>

        <guide-popconfirm
            v-if="activeName === 'month'&& isLogin"
            name="guide-export-month"
            key="guide-export-month"
            :list="guideMonthList"
        ></guide-popconfirm>

    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import {buildTdk} from '@config/tdk';

import GuidePopconfirm from '@/components/sys/guide-popconfirm/index.vue';
import toolsHeader from './components/tools-header.vue';

import figureTable from './figure-table';
import info from './components/info.vue';
import week from './components/week.vue';
import month from './components/month.vue';

import emptyItem from './components/emptyItem.vue';
import dialogProduct from '../../user/center/components/dialog-product.vue';
import NoLogin from './components/noLogin.vue';

export default {
    head() {
        return buildTdk('dataExport');
    },
    layout: 'client',
    components: {
        GuidePopconfirm,
        toolsHeader,
        info,
        week,
        month,
        figureTable,
        emptyItem,
        dialogProduct,
        NoLogin,
    },
    async asyncData(context) {},
    data() {
        return {
            typeName: '导出数据次数',
            num: 0,

            projectids:'',
            dialogVisible: false,

            tabList: [
                {
                    label: '数据统计',
                    name: 'figure',
                    component: figureTable,
                    code: 'SJTJ',
                    imgUrl:'/images/tool/figure.jpg',
                    imgHeight:'1034px',
                },
                {
                    label: '订阅信息',
                    name: 'info',
                    component: info,
                    code: 'DYXX',
                    imgUrl:'/images/tool/dyxx.png',
                    imgHeight:'200px',
                },
                {
                    label: '项目周报',
                    name: 'week',
                    component: week,
                    code: 'ZB',
                    imgUrl:'/images/tool/shili.png',
                    imgHeight:'1000px',
                    hot: true,
                },
                {
                    label: '项目月报',
                    name: 'month',
                    component: month,
                    code: 'YB',
                    imgUrl:'/images/tool/shili.png',
                    imgHeight:'1000px',
                },
            ],
            isLogin: false,

            guideWeekList: [
                {
                    title: '选择需要导出的周报时间',
                    placement: 'right',
                    btn: '开始使用吧',
                    position: [0, 408],
                    size: [470, 45],
                },
            ],
            guideMonthList: [
                {
                    title: '选择需要导出的周报时间',
                    placement: 'right',
                    btn: '开始使用吧',
                    position: [0, 408],
                    size: [470, 45],
                },
            ],

        };
    },
    computed: {
        activeName: {
            get: function () {
                let keyWord = this.getQuery('data');
                if (!keyWord) return 'info'; //不带参数 默认
                return keyWord;
            },
            set: function (val) {},
        },
    },
    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        tabClick(tab, event) {
            this.$router.push(`${this.$route.path}?data=${tab.name}`);

            this.checkLoginAndGetNum();
        },

        /**
         * 检查是否登录，如果登录则按栏目获取剩余次数
         */
        checkLoginAndGetNum() {
            this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
                login: ()=>{
                    this.isLogin = true;

                    // 获取当前查看次数
                    this.queryStatisticData(data => {
                        let keyWord = this.getQuery('data') || 'figure';//不带参数 默认

                        let tabItem = this.tabList.find(item => {
                                return item.name == keyWord
                            }),
                            target = data.find( item => {
                                return  item.code == tabItem.code
                            });

                        this.typeName = tabItem.label;
                        this.num = target.surplus;
                        this.projectids = target.rowguid;
                    });
                },
                noLogin: () =>{
                    this.isLogin = false;
                }, 
            })
        },
        showDialogBuy(){
            this.dialogVisible = true;
        },
        mainComponentShowCalc(item) {
            if (this.activeName === 'figure') {
                // 数据统计要求登录
                return this.isLogin
            }
            
            return this.activeName === item.name
        },
    },
    created() {
        this.checkLoginAndGetNum();
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.data-export {
    .el-card {
        border-radius: 0;
    }
    .data-export-top {
        margin-top: 10px;
    }
    .data-export-main {
        margin-top: 10px;
    }
    .top-img {
        animation: top-img 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    @keyframes top-img {
        0% {
            transform: translateY(-50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
}
</style>
